<template>
	<view style="display: flex;flex-direction: column;width: 100%;background: #f3f3f3;height: 100vh;">
		<view style="display: flex;align-items: flex-start;padding: 30rpx;background: white;">
			<image :src="data.avatar" style="width: 90rpx;height: 90rpx;border-radius: 8rpx;" mode=""></image>
			<view style="display: flex;flex-direction: column;flex:1;margin-left: 12rpx;">
				<view style="font-size: 40rpx;font-weight: bold;">
					{{data.name}}
				</view>
				<view style="font-size: 25rpx;color: #999999;margin-top: 10rpx;">
					{{makePhoneStr(data.phone)}}
				</view>
			</view>
		</view>
		
		<u-cell-group>
			<u-cell-item title="签名" :value="data.note" :arrow="false"></u-cell-item>
			<u-cell-item title="备注" :value="data.remark" :arrow="false"></u-cell-item>
		</u-cell-group>
		<view style="width: 750rpx;height: 10rpx;background: #f3f3f3;">
			
		</view>
		<u-cell-group>
			<u-cell-item @click="setFriendRemark" icon="setting-fill" title="设置好友备注"></u-cell-item>
			<u-cell-item icon="moments" title="好友动态"></u-cell-item>
		</u-cell-group>
		
		<view style="width: 750rpx;height: 10rpx;background: #f3f3f3;">
			
		</view>
		<view style="width: 750rpx;display: flex;justify-content: space-between;align-items: center;background: #fff;height: 100rpx;">
			<view @click="goChat" style="width: 50%; display: flex;align-items: center;justify-content: center;font-weight: 500;color: #3f538a;border-right: 1rpx solid #3f538a;">
				<u-icon label-size="30" size="38" label-color="#3f538a" color="#3f538a" label="发消息" name="chat" />
			</view>
			<view @click="sendVideoCall" style="width: 50%;display: flex;align-items: center;justify-content: center;font-weight: 500;color: #3f538a;">
				<u-icon label-size="30" size="38" label-color="#3f538a" color="#3f538a" label="音视频" name="/static/images/icon_videocall.png" />
			</view>
		</view>
		
		<view style="width: 750rpx;height: 10rpx;background: #f3f3f3;">
			
		</view>
		
		<view style="width: 750rpx;display: flex;justify-content: space-between;align-items: center;background: #fff;height: 100rpx;">
			<view @click="removeFriend" style="font-size: 30rpx;font-weight: 500;margin: auto;color: red;">
				删除好友
			</view>
		</view>

		<u-popup @close="closePop" v-model="show" mode="center" border-radius="16">
			<view style="padding: 30rpx;display: flex;flex-direction: column;width: 600rpx;">
				<view style="margin: 10rpx 0rpx 20rpx 0rpx;font-weight: 500;font-size: 36rpx;">
					设置好友备注信息
				</view>
				<u-input v-model="data.remark" type="textarea" :border="border" />
				<view style="margin: 30rpx auto 10rpx auto;font-weight: 500;">
					<u-button @click="changeFriendRemark" shape="circle" type="primary" size="medium">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-modal @confirm="removeFriendHandle" :show-cancel-button="true" :mask-close-able="true" v-model="showRemove" content="确定删除此好友吗"></u-modal>
	
		
	</view>
</template>

<script>
	import srs from "../../../utils/srs.js"
	export default {
		data() {
			return {
				show: false,
				showRemove:false,
				border: true,
				id: '',
				data: {},
				remark:'',
				context:null
			}
		},
		async onLoad({
			id
		}) {
			if (!id) {
				uni.showToast({
					title:"数据错误",
					icon:"none"
				})
				uni.switchTab({
					url:"/pages/index/index"
				})
				return
			}
			this.id = id 
			const uid = this.$store.state.user.user.id
			const ret = await this.$u.get(`/user/user/${id}/${uid}`)
			console.log(id, ret)
			if (!ret.success) {
				uni.showToast({
					title: "数据错误",
					icon: "none"
				})
				uni.switchTab({
					url: "/pages/index/index"
				})
				return
			}
			this.data = {
				...this.data,
				...ret.data
			}
			this.remark = ret.data.remark
		},
		methods: {
			
			// sendVideoCall:async function(){
			// 	const uid = this.$store.state.user.user.id
			// 	const ret = await srs.publishStream({
			// 		id:uid,
			// 		roomId:uid + "_" + this.id
			// 	})
			// 	console.log(9963,ret)
			// 	uni.navigateTo({
			// 		url:"/pages/chat/friend/videocall?id="+this.id
			// 	})
			// },
			sendVideoCall:async function(){
				uni.navigateTo({
					url:"/pages/chat/friend/videocall?id="+this.id
				})
			},
			goChat:function(){
				const _this = this
				this.$store.dispatch({
					type:"fchat/getFChatMessageInit",
					payload:{
						id:_this.id,
						callback:()=>{
							uni.navigateTo({
								url:"/pages/chat/friend/index?id=" + _this.id
							})
						}
					}
				})
				
			},
			removeFriendHandle: async function(){
				const id = this.id
				const ret = await this.$u.delete(`/friend/friend/${id}`)
				if(ret.success){
					this.$store.dispatch({
						type:"address/refreshFriends",
						payload:{}
					})
					this.$store.dispatch({
						type:"chats/init",
						payload:{}
					})
					uni.switchTab({
						url:"/pages/address/index"
					})
				}else{
					uni.showToast({
						title:ret.message ?? "删除失败",
						icon:"none"
					})
				}
			},
			removeFriend: async function(){
				this.showRemove = true
				// uni.showModal({
				// 	title: '删除好友',
				// 	content: '确定删除此好友吗',
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			_this.removeFriendHandle()
				// 		} else if (res.cancel) {
							
				// 		}
				// 	}
				// });
				
			},
			closePop: function(){
				this.data.remark = this.remark
			},
			changeFriendRemark: async function(){
				const id = this.id
				const ret = await this.$u.post(`/friend/friend/remark/${id}`,{remark:this.data.remark})
				this.show = false
				if(ret.success){
					this.data.remark = ret.data
					this.remark = ret.data
				}else{
					this.data.remark = this.remark
				}
			},
			setFriendRemark: function(){
				this.show = true
			},
			makePhoneStr: function(tel) {
				if (!tel) {
					return ""
				}
				return tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},
			sendAddUserApply: async function() {
				const ret = await this.$u.post(`/user/user/sendAddUserApply`, {
					message: this.value,
					toId: this.id
				})
				if (ret.success) {
					uni.showToast({
						title: "发送成功",
						complete() {
							uni.switchTab({
								url: "/pages/address/index"
							})
						}
					})

				} else {
					uni.showToast({
						title: ret.message ?? "发送失败"
					})
				}
			}
		}
	}
</script>

<style scoped>
	page{
		background: #f3f3f3;
	}
</style>